<!--
 * @Description: Mapbox
 * @Author: wang_k
 * @Date: 2023-04-14 12:03:51
 * @LastEditTime: 2023-04-26 10:38:53
 * @FilePath: /demo_important/src/views/Mapbox/index.vue
-->
<template>
  <div id="map"></div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
let Map = null;
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      mvtStyle: {
        center: [120.29903585867885, 30.178741474851865],
        glyphs:
          'http://172.18.110.25:8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/%E6%B1%87%E4%BA%A4%E6%95%B0%E6%8D%AE/fonts/{fontstack}/{range}',
        layers: [
          {
            paint: {
              'background-color': 'rgba(255,255,255,1.00)',
            },
            id: 'background',
            type: 'background',
          },
          {
            layout: {
              visibility: 'visible',
            },
            filter: ['all', ['==', '$type', 'Polygon']],
            metadata: {
              'layer:caption': '汇交数据@汇交数据',
            },
            maxzoom: 21,
            paint: {
              'fill-color': 'rgba(54,225,7,0.50)',
              'fill-antialias': true,
            },
            id: '汇交数据@汇交数据(0_21)',
            source: '汇交数据',
            'source-layer': '汇交数据@汇交数据',
            type: 'fill',
            minzoom: 0,
          },
          {
            layout: {
              visibility: 'visible',
            },
            filter: ['all', ['==', '$type', 'Polygon']],
            metadata: {
              'layer:caption': '汇交数据@汇交数据',
            },
            maxzoom: 21,
            paint: {
              'line-width': 1.13,
              'line-color': 'rgba(0,178,80,1.00)',
            },
            id: '汇交数据@汇交数据_outline(0_21)',
            source: '汇交数据',
            'source-layer': '汇交数据@汇交数据',
            type: 'line',
            minzoom: 0,
          },
          {
            layout: {
              'text-rotate': 360,
              visibility: 'visible',
              'text-letter-spacing': 0,
              'text-justify': 'left',
              'text-field': '{name}',
              'text-rotation-alignment': 'viewport',
              'text-size': 15.24,
              'text-anchor': 'center',
              'text-allow-overlap': false,
              'text-ignore-placement': false,
              'symbol-placement': 'point',
              'text-font': ['Microsoft YaHei Bold'],
            },
            filter: ['all', ['has', 'name'], ['!=', 'name', '']],
            metadata: {
              'layer:caption': '汇交数据@汇交数据#1',
            },
            maxzoom: 21,
            paint: {
              'text-color': 'rgba(0,0,0,1.00)',
              'text-translate': [0, 0],
            },
            id: '汇交数据@汇交数据#1(0_21)',
            source: '汇交数据',
            'source-layer': '汇交数据@汇交数据_ip',
            type: 'symbol',
            minzoom: 0,
          },
        ],
        metadata: {
          mapcenter: [120.29903585867885, 30.178741475658953],
          indexbounds: [-180, -270, 180, 90],
          mapscale: 0.0000019325767938482268,
          epsgcode: 4490,
          topscale: 3.38032714320531e-9,
          mapbounds: [
            118.96177995299638, 29.293041781638408, 120.6173081200003,
            30.490429934820607,
          ],
        },
        name: '汇交数据',
        sources: {
          汇交数据: {
            tiles: [
              'http://172.18.110.25:8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/%E6%B1%87%E4%BA%A4%E6%95%B0%E6%8D%AE/tiles/{z}/{x}/{y}.mvt',
            ],
            bounds: [-180, -90, 180, 90],
            type: 'vector',
          },
        },
        sprite:
          'http://172.18.110.25:8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/%E6%B1%87%E4%BA%A4%E6%95%B0%E6%8D%AE/sprites/sprite',
        version: 8,
        zoom: 9.1,
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    s() {

    },
    init() {
      const attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
      // 创建地图
      Map = new mapboxgl.Map({
        container: 'map',
        crs: 'EPSG:4490',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              // attribution: attribution,
              tileSize: 256,
              type: 'raster',
              tiles: [
                'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',
                // 'https://iserver.supermap.io/iserver/services/map-Population/rest/maps/PopulationDistribution/zxyTileImage.png?z={z}&x={x}&y={y}',
                // 'https://kjzzyy.hzsgis.com/Ip18-94-7/iserver/services/map-DiMianChenJiangFengXianTu/rest/maps/地面沉降风险图/zxyTileImage.png?z={z}&x={x}&y={y}',
                // "https://hzkjzz.hzsgis.com/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyvector/Mapserver/tile/{z}/{y}/{x}"
              ],
              rasterSource: 'iserver',
            },
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 24,
            },
          ],
        },
        // style: this.mvtStyle,
        center: [120.01770636037799, 30.192941909720602],
        // zoom: 8,
      });
      // 添加argis rest 动态地图服务
      // Map.on('load', function () {
      //   map.addSource('gz', {
      //     type: 'raster',
      //     tiles: [
      //       'https://hzkjzz.hzsgis.com/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyvector/Mapserver/tile/{z}/{y}/{x}',
      //     ],
      //     tileSize: 256,
      //   });
      //   map.addLayer({
      //     id: 'gz-r',
      //     type: 'raster',
      //     source: 'gz',
      //   });
      // });

      /* 示例 */
      // this.addLayerl();
      // this.addKjzzVectortileLayer();
      // this.addKjzz();
      // this.addKjzzTiledLayer();
      this.addKjzzGis();
      // 添加控件
      console.log(Map);
      Map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      // this.clickLayer();
    },

    /* 示例 Add a new layer below labels */
    addLayerl() {
      Map.on('load', () => {
        // data: 'https://kjzzyy.hzsgis.com:8082/Ip110-25-8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/汇交数据/style.json',
        Map.addLayer({
          id: 'rpd_parks',
          type: 'fill',
          source: {
            type: 'geojson',
            data: 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson',
          },
          paint: {
            'fill-color': '#f08',
            'fill-opacity': 0.4,
          },
          layout: {
            // visibility: 'none', // 默认隐藏图层
          },
        });
      });
    },
    //kjzz 地面沉降风险图
    addKjzz() {
      Map.on('load', function () {
        const layers = Map.getStyle().layers;
        let firstSymbolId;
        for (const layer of layers) {
          if (layer.type === 'symbol') {
            firstSymbolId = layer.id;
            break;
          }
        }
        console.log('onload', layers);
        Map.addSource('maps', {
          type: 'raster',
          tiles: [
            // 'https://hzkjzz.hzsgis.com/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyvector/Mapserver/tile/{z}/{y}/{x}',
            'https://kjzzyy.hzsgis.com/Ip18-94-7/iserver/services/map-DiMianChenJiangFengXianTu/rest/maps/地面沉降风险图/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true',
          ],
          tileSize: 256,
        });
        Map.addLayer(
          {
            id: 'map-r',
            type: 'raster',
            source: 'maps',
          },
          firstSymbolId,
        );
      });
    },
    clickLayer() {
      // 点击事件
      Map.on('click', function (e) {
        console.log('点击----->', e);
        let coordinates = e.features[0].geometry.coordinates.slice();
        let description =
          '<h1 style="text-align: center">' +
          '<strong>' +
          '详情' +
          '</strong>' +
          '</h1>' +
          '<br/>' +
          '<h2>' +
          '<strong>' +
          '全称：' +
          '</strong>' +
          e.features[0].properties.DZQC +
          '</h2>' +
          '<h2>' +
          '<strong>' +
          '代码：' +
          '</strong>' +
          '<strong>' +
          e.features[0].properties.DZDM +
          '</strong>' +
          '</h2>' +
          '<br/>';

        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }
        new mapboxgl.Popup({ maxWidth: '900px' })
          .setLngLat(coordinates)
          .setHTML(description)
          .addTo(map);
      });
    },
    /* 服务数据类型： supermap;tiled */
    addKjzzTiledLayer() {
      Map.on('load', function () {
        Map.addLayer({
          id: 'supermap-layer',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              'http://172.18.110.23:8090/iserver/services/map-ZeRenShuJu/rest/maps/%E8%B4%A3%E4%BB%BB%E6%95%B0%E6%8D%AE/zxyTileImage.png?x={x}&y={y}&z={z}&transparent=true',
              'https://kjzzyy.hzsgis.com/Ip18-94-7/iserver/services/map-DiMianChenJiangFengXianTu/rest/maps/地面沉降风险图/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true',
            ],
            tileSize: 256,
            minzoom: 0,
            maxzoom: 22,
          },
          layout: {
            visibility: 'visible',
          },
          paint: {},
        });
      });
    },
    /*  服务数据类型：supermap;vectortile */
    addKjzzVectortileLayer() {
      Map.on('load', function () {
        // let json = 'http://url//xxx.json'; // json可以是geojson对象或者返回goejson的服务
        // 原服务地址 ：https://kjzzyy.hzsgis.com:8082/Ip110-23-8090/iserver/services/map-mvt-ZiRanZhuangJuWaiXianXia/restjsr/v1/vectortile/maps/ZiRanZhuangJuWaiXianXia
        let json =
          // 'https://kjzzyy.hzsgis.com:8082/Ip110-23-8090/iserver/services/map-mvt-ZiRanZhuangJuWaiXianXia/restjsr/v1/vectortile/maps/ZiRanZhuangJuWaiXianXia/style.json';
          'https://kjzzyy.hzsgis.com:8082/Ip110-25-8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/汇交数据/style.json';
        // Map.setStyle(json);
        axios
          .get(
            json,
            // 'http://172.18.110.23:8090/iserver/services/map-mvt-ZiRanZhuangJuWaiXianXia/restjsr/v1/vectortile/maps/ZiRanZhuangJuWaiXianXia/style.json',
            // "http://172.18.101.152:8080/iserver/services/map-mvt-GuShuMingMu/restjsr/v1/vectortile/maps/%E5%8F%A4%E6%A0%91%E5%90%8D%E6%9C%A8/style.json"
          )
          .then((res) => {
            const data = res.data;
            console.log('vectortile---->', data);
            // Map.setStyle(data);
            Map.addSource(data.name, data.sources[data.name]);
            data.layers.forEach((v, i) => {
              if (i !== 0) {
                Map.addLayer(v);
              }
            });
          });
        // Map.addLayer({
        //   id: 'jsonlayer',
        //   type: 'fill',
        //   source: {
        //     type: 'geojson',
        //     data:json
        //     // url: 'https://kjzzyy.hzsgis.com:8082/Ip110-25-8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/汇交数据/tiles/{z}/{x}/{y}',
        //   },
        //   paint: {
        //     'fill-color': '#f08',
        //     'fill-opacity': 0.4,
        //   },
        // });
        // Map.addSource('汇交数据', {
        //   tiles: [
        //     'http://172.18.110.25:8090/iserver/services/map-mvt-HuiJiaoShuJu/restjsr/v1/vectortile/maps/%E6%B1%87%E4%BA%A4%E6%95%B0%E6%8D%AE/tiles/{z}/{x}/{y}.mvt',
        //   ],
        //   bounds: [-180, -90, 180, 90],
        //   type: 'vector',
        // });

        // Map.addLayer({
        //   id: '汇交数据-layer',
        //   type: 'fill',
        //   source: '汇交数据',
        //   'source-layer': '汇交数据@汇交数据',
        //   paint: {
        //     'fill-color': 'rgba(54,225,7,0.50)',
        //   },
        // });
      });
    },
    /* 服务数据类型：arcgis */
    addKjzzGis() {
      const items =
        'https://kjzzyy.hzsgis.com:8082/Ip109-13-8083/512834d664a4d3407b4c18ba3e8b3b66373945ec/ArcGIS/MapService/Catalog/SDE.R2020SDGD.gis';
      const paramdata = {
        spatialRel: 'esriSpatialRelIntersects',
        geometryType: 'esriGeometryPoint',
        geometry: {},
        where: '1=1',
        outFields: '*',
        f: 'json',
      };
      axios
        .post(items + '/query', qs.stringify(paramdata))
        .then((res) => {
          console.log('数据-----', res);
          let array = [];
          res.data.features.forEach((element) => {
            array.push(element.geometry.rings[0]);
          });
          console.log(array);
          Map.addSource('maines', {
            type: 'geojson',
            data: {
              type: 'Feature',
              geometry: {
                type: 'Polygon',
                coordinates: array,
              },
            },
          });
          Map.addLayer({
            id: 'maine',
            type: 'fill',
            source: 'maines', // reference the data source
            layout: {},
            paint: {
              'fill-color': '#0080ff', // blue color fill
              'fill-opacity': 0.7,
            },
          });
          // Map.addLayer({
          //   id: 'outline',
          //   type: 'line',
          //   source: 'maines',
          //   layout: {},
          //   paint: {
          //     'line-color': '#0080ff',
          //     'line-width': 3,
          //   },
          // });
        })
        .catch();
    },
  },
};
</script>

<style scoped >
#map {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}
</style>
